<template>
  <!--  <view class="barrage" :style="[vuex_theme]">-->
  <!--    从相册中选择某个小程序二维码，帮你打开对应的小程序-->
  <!--    <view class="container">-->
  <!--      <button type="primary" @tap="onButtonTap">点击我</button>-->
  <!--      <image-->
  <!--        :show-menu-by-longpress="true"-->
  <!--        src="@/static/mp-weixin/gh_ba740d1a62f7_258.jpg"-->
  <!--      ></image>-->
  <!--    </view>-->
  <!--  </view>-->

  <view class="container">
    <uv-button @click="chooseImage1" text="建议拍今天的车位号码" type="primary"></uv-button>
    <image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="selected-image" />
    <uv-button @click="chooseImage2" text="建议拍车库二维码" type="primary"></uv-button>
    <image
      v-for="(item, index) in garageCodes"
      :key="index"
      :src="item"
      mode="widthFix"
      :show-menu-by-longpress="true"
      class="responsive-image"
    ></image>
    <view class="container-images"></view>
  </view>
  <!-- 在pages/index/index.vue 文件的 <template> 部分 -->
</template>

<script>
export default {
  data() {
    return {
      garageCodes: [],
      imageUrl:
        "" // 用于存储图片路径
    }
  },
  methods: {
    async chooseImage1() {
      try {
        // 调用uni.chooseImage API选择图片
        await uni.chooseImage({
          count: 1, // 限制选择数量为1
          // sourceType: ["album"], // 从相册选择
          success: chooseRes => {
            console.log("chooseRes", chooseRes)

            // 获取选中图片的临时路径
            // eslint-disable-next-line prefer-destructuring
            const tempFilePath = chooseRes.tempFilePaths[0]
            // 将临时路径保存至data中以便显示
            this.imageUrl = tempFilePath
            // 如果需要持久化存储路径，可以使用uni.setStorageSync
            uni.setStorageSync("imagePath", tempFilePath)
          }
        })
      } catch (err) {
        console.error("选择图片时发生错误:", err)
      }
    },
    chooseImage2() {
      uni.chooseImage({
        count: 1, // 限制选择数量为1
        // sourceType: ["album"], // 从相册选择
        success: chooseRes => {
          // 获取选中图片的临时路径
          // eslint-disable-next-line prefer-destructuring
          const tempFilePath = chooseRes.tempFilePaths[0]
          // 将临时路径保存至data中以便显示
          this.garageCodes.push(tempFilePath)

          // 如果需要持久化存储路径，可以使用uni.setStorageSync
          uni.setStorageSync("garage.qrcodes", this.garageCodes)
        }
      })
    }
  },

  // 生命周期钩子，页面加载时尝试从缓存中恢复图片路径
  onLoad() {
    const savedImagePath = uni.getStorageSync("imagePath")
    if (savedImagePath) {
      this.imageUrl = savedImagePath
    }
    //
    const codes = uni.getStorageSync("garage.qrcodes")
    if (codes != null && codes != "") {
      this.garageCodes = codes
    }
    // console.log("onLoad:", this.garageCodes, uni.getStorageSync("garage.qrcodes"))
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.selected-image {
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.container-images {
  width: calc(90%);
}
.responsive-image {
  width: 200px;
  //height: 350px;
  margin-top: 20px;
}
</style>
